<template>
  <div id="app">
    <UserBar></UserBar>
    <div :class="{ githubBtn:true,hide:hideLogin}">
      <a :href="loginUrl">
        使用github帐号登录
      </a>
    </div>
    <Load :hideLoad="hideLoad"></Load>
    <router-view>
    </router-view>
  </div>
</template>

<script>
  import url from "query-string"
  import bus from "@/bus";
  import client from "./js/github-client"
  import UserBar from '@/components/List/UserBar'
  import Load from '@/components/List/Load'

  export default {
    name: 'App',
    components:{UserBar,Load},
    data(){
      return{
        loginUrl: process.env.GITHUB_LOGIN_URL,
        token:"",
        queryObj:{},
      }
    },
    computed:{
      hideLogin(){
        return this.token !== "" || typeof this.queryObj.code !=="undefined" ;
      },
      hideLoad(){
        return this.token !== "" || typeof this.queryObj.code==="undefined"
      }
    },
    mounted(){
      bus.$on("removeToken",  () => {
        localStorage.removeItem("token");
        this.token = "";
        this.queryObj = {}
      });
      if( localStorage.getItem("token") === null){
        this.token = "";
      } else if(localStorage.getItem("token") !== ""){
        bus.$emit("gotAccessToken");
        this.token = localStorage.getItem("token");
        this.$router.push("/gists");
      }
      this.queryObj = url.parse(location.search);
      var _self = this;
      if(typeof this.queryObj.code !== 'undefined'){
        client.get(GITHUB_ACCESS_TOKEN_URL, {
          params: {
            client_id: GITHUB_CLIENT_ID,
            code: this.queryObj.code
          }
        }).then((r) => {
          if (r.data.access_token) {
            localStorage.setItem("token", r.data.access_token);
            _self.token = r.data.access_token;
            _self.$router.push("/gists");
            bus.$emit("gotAccessToken");
          } else {
            this.$message.error('code过期了哦，请重新登录');
            bus.$emit("removeToken");
            this.token="";
            this.$router.push({path:"/"});
          }
        }).catch();
      } else {
       _self.$router.push({path:"/"});
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
  }
  .githubBtn{
    margin-top:-18px ;
    margin-left: -70px;
  }
  .githubBtn,
  .loading{
    position: absolute;
    top:50%;
    left:50%;
  }
  .githubBtn a{
    display: inline-block;
    border-radius:50px;
    width:140px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #409eff;
    color:#fff;
  }
  .githubBtn a:hover{
    background-color: #3a91eb;
  }
  .loading{
    margin-top: -18px;
    margin-left: -18px;
  }
  .loading span{
    font-size:16px;
    position: relative;
    top: -6px;
  }
  .loading i{
    font-size:40px;
  }
  /*公共样式*/
  html,
  body{
    height: 100%;
  }
  body{
    background: #f5f5f5;
  }
  ul{
    list-style-type: none;
  }
  a{
    text-decoration: none;
    color:#333;
    outline: none;
  }
  .content {
    width:500px;
  }
  .item{
    margin-bottom:10px;
  }
  .note{
    font-size:12px;
    color:#f40;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  body,
  pre{
    font-size:12px;
    padding: 0;
    margin: 0;
  }
  .clear:after{
    content:"";
    clear:both;
    display: block;
    height: 0;
    overflow: hidden;
  }
  .hide{
    display: none;
  }
  a{
    cursor: pointer;
  }
  .form-item {
    margin-bottom: 20px;
    font-size:13px;
    padding: 5px 15px;
    line-height: 1.5;
    width: 100%;
    color: #606266;
  }
  .height20{
    height: 20px;
    overflow: hidden;
  }
  i{
    cursor: pointer;
  }
  .gistAdd{
    font-size:14px;
    position: relative;
    top:-2px;
  }
</style>
